<template>
    <div>
        <div class="demo-image">
            <div v-for="(item,index) in list" :key="index" class="block">
                <el-image style="width: 250px; height: 300px" :src="item.img" fit="cover" @click="routeClick(item.id)"/>
                <span class="hidden demonstration" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="10" class="demonstration">￥{{ item.price }}</el-col>
                    <el-col :span="4" class="demonstration" @click="routeClick(item.id)"><el-icon><View /></el-icon></el-col>
                    <el-col :span="4" class="demonstration" @click="cartAdd(item.id)"><el-icon><ShoppingCart /></el-icon></el-col>
                    <el-col :span="4" class="demonstration" @click="buyNow(item.id)"><el-icon><Goods /></el-icon></el-col>
                    <el-col :span="2" class="demonstration"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { useGoodsStore } from '@/store/goods.js';
import {View,ShoppingCart,Goods} from '@element-plus/icons-vue';
import { ElMessage,ElMessageBox } from 'element-plus';
export default {
    props:['list'],
    components:{
        View,
        ShoppingCart,
        Goods
    },
    data() {
        return {
            data:[],
            store:useGoodsStore()
        }
    },
    methods: {
        routeClick(val){
            this.data=this.list.find( v => v.id == val)
            this.$router.push({path:'/detail',query:this.data})//携带数据进行跳转
        },
        cartAdd(val) {
    ElMessageBox.confirm('是否加入购物车？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'question'
    }).then(() => {
        this.data = this.list.find(v => v.id === val);
        this.store.cartAdd({
            id: this.data.id,
            name: this.data.name,
            price: this.data.price,
            onlineprice: this.data.onlineprice,
            num: 1,
            total: this.data.onlineprice
        });
        // 不跳转到购物车页面
        // this.$router.push('/Cart');
        // 显示成功加入购物车的提示
        ElMessage({
            type: 'success',
            message: '成功加入购物车',
        });
    }).catch(() => {
        ElMessage.info('已取消加入购物车');
    });
},
    buyNow(val) {
            ElMessageBox.confirm('是否购买该商品？', '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'question'
            }).then(() => {
                this.data = this.list.find(v => v.id === val);
                const newOrderItem = {
                    orderID: new Date().getTime(),
                    time: new Date().toISOString(),
                    num: 1,
                    sum: this.data.onlineprice,
                    isOrdered: false,
                    child: [{
                        id: this.data.id,
                        name: this.data.name,
                        onlineprice: this.data.onlineprice,
                        num: 1,
                        total: this.data.onlineprice
                    }]
                };
                let orderData = JSON.parse(sessionStorage.getItem('order')) || [];
                orderData.push(newOrderItem);
                sessionStorage.setItem('order', JSON.stringify(orderData));
                this.$router.push('/Order');
                ElMessage.success('购买成功');
            }).catch(() => {
                ElMessage.info('已取消购买');
            });
        }
    },
}
   
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.hidden{
    margin: 0 auto;
    width: 100px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-inline-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>
